import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px'; //有了这个插件下面自定义规则可以优化一下

export default defineConfig({
  content: {
    pipeline: {
      exclude: [
        'node_modules',
        '.git',
        '.gitlab',
        '.husky',
        '.vscode',
        'dist_electron',
        'electron',
        'dist',
        'mock',
        'public',
        './stats.html',
      ],
    },
  },

  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4, // 默认16
    }),
    presetIcons({
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
      customizations: {
        transform(svg, collection, icon) {
          // do not apply fill to this icons on this collection
          if (collection === 'custom' && icon === 'my-icon') return svg;
          return svg.replace(/#fff/, 'currentColor');
        },
      },
      collections: {
        // https://icones.js.org/collection
        // https://icones.js.org/collection/carbon
        carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then((i) => i.default),
        antd: () => import('@iconify-json/ant-design/icons.json').then((i) => i.default),
        custom: FileSystemIconLoader('./src/assets/svg'),
        //用法 <div class="i-custom-vite w-px-30 h-px-30" />  or  <div i-custom-vite w-px-30 h-px-30 />
        // custom: FileSystemIconLoader('./src/assets/svg', (svg) => svg.replace(/#fff/, 'currentColor')),
      },
    }),
  ],
  // 自定义规则
  rules: [
    [/^w-px-(\d+)$/, ([, d]) => ({ width: `${Number(d)}px` })],
    [/^h-px-(\d+)$/, ([, d]) => ({ height: `${Number(d)}px` })],
    [/^min-w-px-(\d+)$/, ([, d]) => ({ 'min-width': `${Number(d)}px` })],
    [/^min-h-px-(\d+)$/, ([, d]) => ({ 'min-height': `${Number(d)}px` })],
    [/^w-percent-(\d+)$/, ([, d]) => ({ width: `${Number(d)}%` })],
    [/^h-percent-(\d+)$/, ([, d]) => ({ height: `${Number(d)}%` })],
    [/^min-w-percent-(\d+)$/, ([, d]) => ({ 'min-width': `${Number(d)}%` })],
    [/^min-h-percent-(\d+)$/, ([, d]) => ({ 'min-height': `${Number(d)}%` })],
    [/^w-vw-(\d+)$/, ([, d]) => ({ width: `${Number(d)}vw` })],
    [/^h-vh-(\d+)$/, ([, d]) => ({ height: `${Number(d)}vh` })],
    [/^min-w-vw-(\d+)$/, ([, d]) => ({ 'min-width': `${Number(d)}vw` })],
    [/^min-h-vh-(\d+)$/, ([, d]) => ({ 'min-height': `${Number(d)}vh` })],
    [/^line-height-(\d+)$/, ([, d]) => ({ 'line-height': `${Number(d)}px` })],
    [/^outline-(\d+)$/, ([, d]) => ({ outline: `${Number(d)}px red solid` })],
    // 下面这些被 presetRemToPx 取代了,当然，如果使用rem的时候，又想使用px，可以取消注释下面的规则
    // [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
    // [/^mt-(\d+)$/, ([, d]) => ({ 'margin-top': `${Number(d) * 10}px` })],
    // [/^mt--(\d+)$/, ([, d]) => ({ 'margin-top': `-${Number(d) * 10}px` })],
    // [/^mr-(\d+)$/, ([, d]) => ({ 'margin-right': `${Number(d) * 10}px` })],
    // [/^mr--(\d+)$/, ([, d]) => ({ 'margin-right': `-${Number(d) * 10}px` })],
    // [/^mb-(\d+)$/, ([, d]) => ({ 'margin-bottom': `${Number(d) * 10}px` })],
    // [/^mb--(\d+)$/, ([, d]) => ({ 'margin-bottom': `-${Number(d) * 10}px` })],
    // [/^ml-(\d+)$/, ([, d]) => ({ 'margin-left': `${Number(d) * 10}px` })],
    // [/^ml--(\d+)$/, ([, d]) => ({ 'margin-left': `-${Number(d) * 10}px` })],
    // [/^p-(\d+)$/, ([, d]) => ({ padding: `${Number(d) * 10}px` })],
    // [/^pt-(\d+)$/, ([, d]) => ({ 'padding-top': `${Number(d) * 10}px` })],
    // [/^pr-(\d+)$/, ([, d]) => ({ 'padding-right': `${Number(d) * 10}px` })],
    // [/^pb-(\d+)$/, ([, d]) => ({ 'padding-bottom': `${Number(d) * 10}px` })],
    // [/^pl-(\d+)$/, ([, d]) => ({ 'padding-left': `${Number(d) * 10}px` })],
    // [/^font-size-(\d+)$/, ([, d]) => ({ 'font-size': `${Number(d)}px` })],
    // [/^top-(\d+)$/, ([, d]) => ({ top: `${Number(d)}px` })],
    // [/^right-(\d+)$/, ([, d]) => ({ right: `${Number(d)}px` })],
    // [/^bottom-(\d+)$/, ([, d]) => ({ bottom: `${Number(d)}px` })],
    // [/^left-(\d+)$/, ([, d]) => ({ left: `${Number(d)}px` })],
    // [/^gap-(\d+)$/, ([, d]) => ({ left: `${Number(d)}px` })],
  ],
  //自定义快捷键
  shortcuts: {
    'flex-end': 'flex justify-end',
    'flex-start': 'flex justify-start',
    'flex-around': 'flex justify-around',
    'flex-between': 'flex justify-between',
    'flex-center': 'flex items-center justify-center',
  },
});
